import React, { useState } from 'react';
import {
  Popconfirm,
  Input,
  message,
  Modal,
  Descriptions,
  Radio,
  Select,
  Button,
} from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import columnsData, { columnsDataType } from './data';
import { PlusOutlined } from '@ant-design/icons';
import TableTitle from '../../components/TableTitle';
import { getDAOList, audit, getTenantDao } from './service';
import { getDictType } from '@/services/services';

const { TextArea } = Input;
const { Option } = Select;

type DAOTypeItemType = {
  createTime?: string;
  delFlag: string;
  dictId: string;
  dictType: string;
  id: string;
  itemValue: string;
  label: string;
  remark?: string;
  sort: number;
  updateTime?: string;
};

export default () => {
  // 控制详情模态框
  const [isDetailsModal, setIsDetailsModal] = useState(false);
  // 查看的的DAO
  const [DAOInfo, setDAOInfo] = useState<columnsDataType>();
  // 表头数据
  const columns: ProColumns<columnsDataType>[] = columnsData;
  // DAO类型列表
  const [DAOType, setDAOType] = useState<DAOTypeItemType[]>([]);
  // DAO类型
  const [type, setType] = useState<string>();

  // 操作行数据 自定义操作行
  const actionRender: any = (text: any, record: any, index: number) => (
    <ul className="ant-list-item-action" style={{ margin: 0 }}>
      {record.status == 1 ? (
        <li>
          <a
            onClick={async () => {
              let res = await getTenantDao({ serialNo: record.serialNo });
              console.log(res);
              setDAOInfo(res.data);
              DAOType.forEach((item: DAOTypeItemType) => {
                item.itemValue == res.data?.type ? setType(item.label) : null;
              });
              setIsDetailsModal(true);
            }}
          >
            查看
          </a>
        </li>
      ) : record.status == 0 ? (
        <>
          <li>
            <Popconfirm
              title="确认此账号通过审核 ？"
              onConfirm={async () => {
                let res = await audit({ serialNo: record.serialNo, flag: '1' });
                if (res.code === '000000') {
                  message.success('已通过审核');
                }
                // 表格重新渲染
                actionRef.current?.reload();
              }}
              okText="确认"
              cancelText="取消"
            >
              <a>通过</a>
            </Popconfirm>
            <em className="ant-list-item-action-split"></em>
          </li>
          <li>
            <Popconfirm
              title="确认拒绝开通DAO ？"
              onConfirm={async () => {
                let res = await audit({ serialNo: record.serialNo, flag: '2' });
                if (res.code === '000000') {
                  message.success('已拒绝');
                }
                // 表格重新渲染
                actionRef.current?.reload();
              }}
              okText="确认"
              cancelText="取消"
            >
              <a>拒绝</a>
            </Popconfirm>
          </li>
        </>
      ) : null}
    </ul>
  );

  // 自定义数据的表格头部数据
  columns.forEach((item: any) => {
    item.dataIndex === 'action' ? (item.render = actionRender) : undefined;
  });

  React.useEffect(() => {
    getDAOType();
  }, []);

  /**
   * 获取DAO类型
   */
  const getDAOType = async () => {
    let res = await getDictType({
      dictType: 'dao-type',
      pageSize: 10,
      current: 1,
    });
    console.log(res);
    if (res.code === '000000') setDAOType(res.data);
  };

  // Table action 的引用，便于自定义触发
  const actionRef = React.useRef<ActionType>();

  return (
    <div>
      {/* Pro表格 */}
      <ProTable<columnsDataType>
        headerTitle={<TableTitle title="DAO审批" />}
        scroll={{ x: 900 }}
        actionRef={actionRef}
        bordered
        // 表头
        columns={columns}
        // 请求获取的数据
        request={async (params) => {
          console.log(params);
          let res = await getDAOList({ ...params, pageNum: params.current });
          console.log('😒', res);
          const result = {
            data: res.data,
            total: res.pagination.totalSize,
          };
          return result;
        }}
        rowKey="serialNo"
        // 本地存储表格列的显示数据
        columnsState={{
          persistenceKey: 'DAOApproval-table',
          persistenceType: 'localStorage',
        }}
        // 搜索框配置
        search={{
          labelWidth: 'auto',
        }}
        // 搜索表单的配置
        form={{
          ignoreRules: false,
        }}
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
      />
      <Modal
        title="详情"
        width={1000}
        visible={isDetailsModal}
        // onOk={handleDetailsOk}
        onCancel={() => setIsDetailsModal(false)}
        footer={[
          <Button
            type="primary"
            key="1"
            onClick={() => {
              setIsDetailsModal(false);
            }}
          >
            确定
          </Button>,
        ]}
      >
        <Descriptions>
          <Descriptions.Item label="DAO编码">
            {DAOInfo?.serialNo}
          </Descriptions.Item>
          <Descriptions.Item label="DAO名称">
            {DAOInfo?.daoName}
          </Descriptions.Item>
          <Descriptions.Item label="DAO英文名">
            {DAOInfo?.daoCode}
          </Descriptions.Item>
          <Descriptions.Item label="创建人">
            {DAOInfo?.createBy ? DAOInfo?.createBy : '暂无信息'}
          </Descriptions.Item>
          <Descriptions.Item label="电话">{DAOInfo?.phone}</Descriptions.Item>
          <Descriptions.Item label="DAO类型">
            {type ? type : '暂无信息'}
          </Descriptions.Item>
          {/* <Descriptions.Item label="Address">
            {DAOInfo?.}
          </Descriptions.Item> */}
        </Descriptions>
      </Modal>
    </div>
  );
};
